<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core"  prefix="c"%> 
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>后台系统</title>
   	<base href="${Context}">
    <link rel="stylesheet" type="text/css" href="css/metro/easyui.css">
    <link rel="stylesheet" type="text/css" href="css/theme/mobile.css">
    <link rel="stylesheet" type="text/css" href="css/theme/color.css">
    <link rel="stylesheet" type="text/css" href="css/theme/icon.css">
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript" src="js/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="js/jquery.easyui.mobile.js"></script>
    <script type="text/javascript" src="js/Util.js"></script>
    <style type="text/css">
        .InfoText {
            color: #B8860B;
            font-size: 16px;
            font-weight: 500;
        }
    </style>
</head>
<body style="height: 99%;">
<div class="easyui-panel" style="overflow: auto; width: 100%; height: 100%">
    <div class="easyui-tabs" data-options="fit:true,border:false,tabWidth:80,tabHeight:30,onSelect:OnSelectTab">
        <div title="日报">
            <div id="HeaderTableDayLogs" style="padding: 2px 6px;height: 42px">
                <div class="InfoText">销售总量：<span id="Sales" class="InfoText">${totalSaleNumber }</span></div>
                <div class="InfoText">剩余钻石：<span id="Balance" class="InfoText">${user.agentCoin }</span></div>
            </div>
            <table id="TableDayLogs" data-options="header:'#HeaderTableDayLogs',singleSelect:true,border:false,fit:true,
            fitColumns:true,pagination:true,scrollbarSize:0"></table>
        </div>
        <div title="销售记录">
            <div id="HeaderTableSale" style="padding: 2px 6px">
                <span>从</span>
                <input id="DateFromSale" class="easyui-datebox" data-options="formatter:FormatterDate,parser:ParserDate"
                       style="width:34%">
                <span>到</span>
                <input id="DateToSale" class="easyui-datebox" data-options="formatter:FormatterDate,parser:ParserDate"
                       style="width:34%">
                <a href="javascript:void(0)" class="easyui-linkbutton c6" style="padding: 2px 12px"
                   onclick="OnClickQuery(0)">查询</a>
            </div>
            <table id="TableSale" data-options="header:'#HeaderTableSale',singleSelect:true,border:false,fit:true,
            fitColumns:true,pagination:true,scrollbarSize:0">
                <thead>
                <tr>
                    <th data-options="field:'playerId',width:50,align:'center'">买家ID</th>
                    <th data-options="field:'playerName',width:50,align:'center'">买家昵称</th>
                    <th data-options="field:'saleNumbers',align:'center'">钻石数量</th>
                    <th data-options="field:'createTime',width:100,align:'center'">时间</th>
                </tr>
                </thead>
            </table>
        </div>
        <div title="进货记录">
            <div id="HeaderTablePay" style="padding: 2px 6px">
                <span>从</span>
                <input id="DateFromPay" class="easyui-datebox" data-options="formatter:FormatterDate,parser:ParserDate"
                       style="width:34%">
                <span>到</span>
                <input id="DateToPay" class="easyui-datebox" data-options="formatter:FormatterDate,parser:ParserDate"
                       style="width:34%">
                <a href="javascript:void(0)" class="easyui-linkbutton c6" style="padding: 2px 12px"
                   onclick="OnClickQuery(1)">查询</a>
            </div>
            <table id="TablePay" data-options="header:'#HeaderTablePay',singleSelect:true,border:false,fit:true,
            fitColumns:true,pagination:true,scrollbarSize:0">
                <thead>
                <tr>
                    
                    
                    <th data-options="field:'mahjongCoin',align:'center'">钻石数量</th>
                    <th data-options="field:'amount',align:'center',formatter:function(v,r,i){return v?v:'';}">金额</th>
                    <th data-options="field:'recordId',width:50,align:'center'">订单号</th>
                    <th data-options="field:'states',align:'center',formatter:formatRecordStates">状态</th>
                    <th data-options="field:'recordTime',width:150,align:'center'">时间</th>
                </tr>
                </thead>
            </table>
        </div>
    </div>
</div>
</body>
<script>
var sys=sys || {};
sys.context = "${Context}";
sys.contextPath="${ContextPath}";
    (function () {
    	
    	
    	
		
    })();



	function formatRecordStates(value, row, index){
		if(!value) return '成功';
		return value;
	}
    function OnSelectTab(sTitle) {
        if ('销售记录' == sTitle) {
            $('#TableSale').datagrid({
                url: sys.context+'main/getSaleRecord',
                onLoadSuccess: function (oData) {
                    console.log('#TableSale onLoadSuccess()-->', oData);
                }
            });
            var pager =  $("#TableSale").datagrid('getPager');	// get the pager of datagrid
            pager.pagination({layout:['links']});
        } else if('进货记录' == sTitle){
            $('#TablePay').datagrid({
                url: sys.context+'main/getBuyRecord',
                onLoadSuccess: function (oData) {
                    console.log('#TablePay onLoadSuccess()-->', oData);
                },
                queryParams: {
                }
            });
            var pager =  $("#TablePay").datagrid('getPager');	// get the pager of datagrid
            pager.pagination({layout:['links']});
        }else {
            $("#TableDayLogs").datagrid({
                url:sys.context+'main/getDayReport',
                pageNumber:1,
                pageSize:10,
                queryParams: {
                    'page': sys.page||1,
                    'rows': sys.rows||10
                },	
                onLoadSuccess: function (oData) {
                    console.log('#TableDayLogs onLoadSuccess()-->', oData);		
                },columns: [
                    [{
                        field: 'time',
                        title: '日期',
                        width: 100,
                        align: 'center'
                    }, {
                        field: 'rounds',
                        title: '开局总数',
                        width: 100,
                        align: 'center'
                    }, {
                        field: 'consume',
                        title: '钻石消耗',
                        width: 100,
                        align: 'center'

                    },{
                        field: 'sale',
                        title: '出售钻石',
                        width: 100,
                        align: 'center'
                    },{
                        field: 'details',
                        title: '详情',
                        align: 'center',
                        formatter: function (value, row, index) {
                            var oBtn = $('<a>').text('详情').attr('href', 'javascript:void(0)').attr('onclick', 'OnClickDetails(' + index + ')').css('padding', '2px 0px');
                            oBtn.linkbutton({plain: false});
                            var oSpan = $('<span>');
                            oSpan.append(oBtn);
                            return oSpan.html();
                        }
                    }]
                ]
            });
            var pager =  $("#TableDayLogs").datagrid('getPager');	// get the pager of datagrid
            pager.pagination({layout:['links']});

        }
    }

    function OnClickDetails(index){
        var table = $("#TableDayLogs");
        table.datagrid('selectRow', index);
        var oRowData = table.datagrid('getSelected');
        var date = oRowData.log_date;
        window.location.href='#'+date;
    }


    function ParserDate(s) {
        if (!s) return new Date();
        var ss = (s.split('-'));
        var y = parseInt(ss[0], 10);
        var m = parseInt(ss[1], 10);
        var d = parseInt(ss[2], 10);
        if (!isNaN(y) && !isNaN(m) && !isNaN(d)) {
            return new Date(y, m - 1, d);
        } else {
            return new Date();
        }
    }

    function FormatterDate(date) {
        var y = date.getFullYear();
        var m = date.getMonth() + 1;
        var d = date.getDate();
        return y + '-' + (m < 10 ? ('0' + m) : m) + '-' + (d < 10 ? ('0' + d) : d);
    }

    function OnClickQuery(nType) {
        if (0 == nType) {
            var sDateFrom = $('#DateFromSale').datebox('getValue');
            var sDateTo = $('#DateToSale').datebox('getValue');
            $('#TableSale').datagrid({
                url: sys.context+'main/getSaleRecord',
                queryParams: {
                    'startDate': sDateFrom,
                    'endDate': sDateTo
                }
            });
        } else if (1 == nType) {
            var sDateFrom = $('#DateFromPay').datebox('getValue');
            var sDateTo = $('#DateToPay').datebox('getValue');
            $('#TablePay').datagrid({
                url: sys.context+'main/getBuyRecord',
                queryParams: {
                    'startDate': sDateFrom,
                    'endDate': sDateTo
                }
            });
        }
    }
</script>
</html>